<template>
  <el-card>
    <el-table
      :data="data"
      style="width: 100%"
      border
      row-key="id"
      :tree-props="defaultProps"
      :expand-row-keys="rowKeys"
    >
      <template slot="empty">
        <el-empty description="空" />
      </template>
      <el-table-column
        prop="name"
        label="名称"
        width="width"
      />
      <el-table-column
        prop="code"
        label="权限值"
        width="width"
      />
      <el-table-column
        prop="toCode"
        label="跳转权限值"
        width="width"
      />
      <el-table-column
        prop="prop"
        label="操作"
        width="width"
      >
        <template slot-scope="{row}">
          <div>
            <el-button type="primary" icon="el-icon-plus" title="添加菜单" size="mini" :disabled="row.level===4 || $store.state.user.buttons.indexOf('btn.Permission.add')===-1" @click="add(row)" />
            <el-button type="primary" style="margin-right:10px" icon="el-icon-edit" title="修改菜单" size="mini" :disabled="row.level===1 || $store.state.user.buttons.indexOf('btn.Permission.update')===-1" @click="edit(row)" />
            <el-popconfirm
              :title="`确定删除${row.name}吗?`"
              @confirm="del(row)"
            >
              <el-button slot="reference" type="danger" icon="el-icon-delete" title="删除" size="mini" :disabled="row.level===1 || $store.state.user.buttons.indexOf('btn.Permission.remove')===-1" />
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      width="width"
      :close-on-click-modal="false"
      @close="close"
    >
      <el-form ref="ruleForm" :rules="rules" :model="form">
        <el-form-item v-if="form.level!==2 && title!=='修改菜单' && title!=='修改功能'" prop="pname" label="父级名称" label-width="110px">
          <el-input v-model="form.pname" :disabled="true" />
        </el-form-item>
        <el-form-item prop="name" label="名称" label-width="110px" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item prop="code" label="功能权限值" label-width="110px" required>
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item v-if="form.level===4 || title==='修改功能'" prop="toCode" label="跳转路由权限值" label-width="110px">
          <el-input v-model="form.toCode" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { cloneDeep } from 'lodash'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      rowKeys: ['1'],
      dialogVisible: false,
      form: {
        code: '',
        level: '',
        name: '',
        pid: '',
        toCode: '',
        type: ''
      },
      title: '',
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入功能权限值', trigger: 'blur' }
        ]
      },
      nowRow: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await this.$api.permission.getPermissionList()
      if (res.code === 20000) {
        this.data = res.data.children
      }
    },
    add(e) {
      this.dialogVisible = true
      this.form.type = 1
      if (e.level === 1) {
        this.title = '添加一级菜单'
        this.form.level = 2
      } else if (e.level === 2) {
        this.title = '添加二级菜单'
        this.form.level = 3
        this.form.pname = e.name
      } else {
        this.title = '添加功能'
        this.form.level = 4
        this.form.pname = e.name
        this.form.type = 2
      }
      this.form.pid = e.id
    },
    edit(row) {
      this.nowRow = row
      this.title = '修改菜单'
      this.form.name = row.name
      this.form.code = row.code
      if (row.level === 4) {
        this.title = '修改功能'
      }
      this.dialogVisible = true
    },
    ok() {
      this.$refs.ruleForm.validate(async(e) => {
        if (e) {
          if (this.title !== '修改菜单' && this.title !== '修改功能') {
            delete this.form.pname
            const res = await this.$api.permission.addPermission(this.form)
            if (res.code === 20000) {
              this.$message({ type: 'success', message: '添加成功' })
              var id = this.form.pid
              this.form = {
                code: '',
                level: '',
                name: '',
                pid: '',
                toCode: '',
                type: ''
              }
              this.$refs.ruleForm.resetFields()
              this.getData()
              this.dialogVisible = false
              this.$nextTick(() => {
                this.rowKeys.push(id)
                this.rowKeys = Array.from(new Set(this.rowKeys))
              })
            }
          } else {
            var permission = cloneDeep(this.nowRow)
            delete permission.children
            permission.name = this.form.name
            permission.code = this.form.code
            permission.gmtModified = dayjs().format('YYYY-MM-DD HH:mm:ss')
            const res = await this.$api.permission.updatePermission(permission)
            if (res.code === 20000) {
              this.$message({ type: 'success', message: '修改成功' })
              this.form = {
                code: '',
                level: '',
                name: '',
                pid: '',
                toCode: '',
                type: ''
              }
              this.$refs.ruleForm.resetFields()
              this.getData()
              this.dialogVisible = false
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async del(e) {
      const res = await this.$api.permission.removePermission(e.id)
      if (res.code === 20000) {
        this.$message({ type: 'success', message: '删除成功' })
        this.getData()
      }
    },
    close() {
      this.dialogVisible = false
      this.form = {
        code: '',
        level: '',
        name: '',
        pid: '',
        toCode: '',
        type: ''
      }
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style>

</style>
